<template>
	<view class="container pageBg">
		<view class="top" :style="{ top: getStatusBarHeight() + 'px' }">
			<view class="topBody">
				帖子
				<uni-icons @click="createPost" class="create" type="plusempty" size="25"></uni-icons>
			</view>

			<view class="search">
				<view class="searchBox">
					<uni-search-bar @input="handleInput" v-model="searchValue" @confirm="confirm" focus placeholder="请输入您要搜索的帖子" @cancel="cancel"></uni-search-bar>
				</view>
			</view>
		</view>
		<uv-skeletons class="skeletons" v-if="loading" :loading="loading" :skeleton="skeleton"></uv-skeletons>
		<view v-else class="post-list">
			<view v-if="postList.length === 0" class="notice">没有相关帖子</view>
			<uni-card class="card" v-for="item in postList" :key="item.id" @click="postDetail(item)" :title="item.title" :sub-title="item.user.nickName">
				<text class="uni-body ellipsis-text">{{ item.content }}</text>
				<view slot="actions" class="card-actions">
					<view class="card-actions-item">
						<uni-icons type="eye" size="18" color="#999"></uni-icons>
						&nbsp;
						<text class="card-actions-item-text">浏览量 ({{ item.views }})</text>
					</view>
					<view class="card-actions-item" @click="addLikes(item)">
						<uni-icons type="heart" size="18" color="#999"></uni-icons>
						&nbsp;
						<text class="card-actions-item-text">点赞量 ({{ item.likes }})</text>
					</view>
					<view class="card-actions-item">
						<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
						&nbsp;
						<text class="card-actions-item-text">评论数 ({{ item.comments.length }})</text>
					</view>
				</view>
				<view v-if="item.user.id === userInfo.id" class="card-actions-item delete-btn" @click.stop="deletePost(item.id)">
					<uni-icons type="trash" size="20"></uni-icons>
					<text class="card-actions-item-text">删除</text>
				</view>
			</uni-card>
			<uni-load-more v-if="isButtom" :status="status" :content-text="contentText" />
			<view class="safe-area-insert-bottom"></view>
		</view>
	</view>
</template>

<script setup>
import { getStatusBarHeight } from '../../utils/system.js';
import { getPostList, addLike, deletePostAPI } from '../../api/community.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import debounce from 'lodash/debounce';
import { onReachBottom } from '@dcloudio/uni-app';

const postList = ref([]);
const status = ref('loading');
const loading = ref(true);
const isButtom = ref(false);
const contentText = {
	contentdown: '查看更多',
	contentrefresh: '加载中',
	contentnomore: '没有更多'
};
const userInfo = JSON.parse(uni.getStorageSync('user_info') || '{}');
const skeleton = ref([
	{
		type: 'line',
		num: 3,
		gap: '20rpx'
	}
]);
const queryParams = reactive({
	pageNum: 1,
	pageSize: 10
});
onReachBottom(() => {
	isButtom.value = true;
	if (status.value === 'loading' || status.value === 'nomore') return;
	queryParams.pageNum++;
	getPost();
});
const searchNum = ref(0);
const searchValue = ref('');
const deletePost = async (id) => {
	uni.showModal({
		title: '是否要删除帖子',
		cancelText: '取消',
		confirmText: '删除',
		success: async function (res) {
			if (res.confirm) {
				const res1 = await deletePostAPI({
					userId: userInfo.id,
					postId: id
				});
				uni.showToast({
					title: '删除成功！'
				});
				queryParams.pageNum = 1;
				postList.value = [];
				status.value = 'loading';
				getPost(searchValue.value.trim());
			}
		}
	});
};
const cancel = () => {
	getPost();
};
const createPost = () => {
	uni.navigateTo({
		url: '/pages/addPost/addPost'
	});
};
const postDetail = (item) => {
	uni.navigateTo({
		url: `/pages/postDetail/postDetail?postId=${item.id}&userId=${userInfo.id}`
	});
};
const handleInput = (e) => {
	const value = e;
	searchValue.value = value;
	if (value.trim().length >= 2) {
		loading.value = true;
		debouncedSearch(value.trim());
	}
	if (value.trim().length === 0) {
		getPost();
	}
};

const debouncedSearch = debounce(async (value) => {
	loading.value = true;
	queryParams.pageNum = 1;
	queryParams.pageSize = 10;
	searchNum.value = 0;
	postList.value = [];
	getPost(value);
	loading.value = false;
}, 1000);
const getPost = async (title = '') => {
	status.value = 'loading';
	try {
		const res = await getPostList({ title, pageNo: queryParams.pageNum, pageSize: queryParams.pageSize });
		if (res.data.posts.length === 0) {
			status.value = 'nomore';
		} else {
			loading.value = false;
			searchNum.value = res.data.totalCount;
			postList.value = [...postList.value, ...res.data.posts];
			status.value = 'more';
		}
	} catch (error) {
		status.value = 'nomore';
	}
};
onShow(() => {
	queryParams.pageNum = 1;
	postList.value = [];
	status.value = 'loading';
	getPost(searchValue.value.trim());
});
</script>

<style lang="scss">
.container {
	.top {
		position: relative;
		.topBody {
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-family: 'KaiTi', sans-serif;
			font-weight: 700;
			.create {
				position: absolute;
				right: 40rpx;
			}
		}
	}
	.skeletons {
		margin-top: 80rpx;
	}
	.post-list {
		margin-top: 100rpx;
		.notice {
			margin-left: 30rpx;
		}

		.delete-btn {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
		}

		.ellipsis-text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-word;
			line-height: 1.5;
		}
		.card-actions {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 70rpx;
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1px #eee solid;
		}
		.card-actions-item {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
}
</style>
